import { XmImage } from "@/components/tool";
import { XmPullRefresh } from "@/components/tool";
import { View, Text } from "@tarojs/components";
import { observer } from "mobx-react";
import React, { Fragment, useEffect, useState } from "react";
import { Router } from "@/path/router";
import { Flex } from "@taroify/core";
import { onRequestPayment } from '@/path/acrossAPI/index'
import { getProductList, vipRecharge } from '@/path/api/vip/index'
import { userStore } from "@/store";
import { XmDialogModal } from "@/components/public";
import "./index.scss"
function Index() {
  const [current, setCurrent] = useState(4)
  // 选中vip包
  const select = (item) => {
    setCurrent(item.productId)
  }
  // 购买会员包
  const buy = () => {
    if (userStore.userInfo.isRecycler === 0) {
      XmDialogModal({
        title: "温馨提示",
        content: "您还不是回收员，请先注册为回收员后再购买",
        confirmText: "去注册"
      }).then(() => {
        Router.toRegrecycler()
      })
      return
    }
    if (userStore.userInfo.isRecycler === 2) {
      XmDialogModal({
        title: "温馨提示",
        content: "您的回收员注册申请审核中，请在审核通过之后再购买",
        confirmText: "去查看"
      }).then(() => {
        Router.toRegrecycler()
      })
      return
    }
    if (userStore.userInfo.isRecycler === 3) {
      XmDialogModal({
        title: "温馨提示",
        content: "您的回收员注册审核不通过，请在审核通过之后再购买",
        confirmText: "去查看"
      }).then(() => {
        Router.toRegrecycler()
      })
      return
    }
    const data = {
      vipId: current
    }
    vipRecharge(data).then((res) => {
      onRequestPayment({
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        packages: res.data.packageVal,
        sign: res.data.paySign,
      }).then(() => {
        Router.toStatusPage({
          title: '支付成功',
          img: 'pay-success.png',
          text: '恭喜您！成为我们的会员~赶快抢单试试吧'
        })
      })
    })
  }
  const [vippack, setVippack] = useState<any[]>([])

  useEffect(() => {
    getProductList().then((res) => {
      setVippack(res.data)
      setCurrent(res.data[res.data.length - 1].productId)
    })
  }, [])
  return <>
    <XmPullRefresh>
      <View className="vip">
        <View className="vip-pack">
          <Flex wrap="wrap" gutter={18}>
            {vippack.map((item) => (
              <Flex.Item span={6}>
                <View className={current == item.productId ? 'vip-bag current' : 'vip-bag'} onClick={() => select(item)}>
                  <View className="vip-text-title">{item.name}</View>
                  <View className="vip-text-price"><Text className="vip-text-price-icon">¥</Text>{item.price}</View>
                  <View className="vip-text-value"><Text className="vip-text-price-icon">¥</Text>{item.originalPrice}</View>
                </View>
              </Flex.Item>
            ))}
          </Flex>
          <View className="vip-box">
            <View className="vip-box-btn" onClick={buy}>购买会员</View>
          </View>
        </View>
        <View className="vip-content vip-pack">
          <View className="vip-content-imgbox">
            <XmImage className="vip-content-img" src={'icon-vip2.png'} static />
          </View>
          <View className="vip-content-viptitle">
            <Text>会员权益</Text>
          </View>
          <View className="vip-content-text">
            <View>1.每次可接十单，每天不限次数；</View>
            <View>2.抢单后可获得发布人联系方式预约取货；</View>
            <View>3.系统自动生成线路，并提供地图导航，再也不用叫大街。</View>
          </View>
        </View>
      </View>
    </XmPullRefresh>
  </>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
